<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item label="主机">
          <el-select v-model="filters.host" @change="handleHostChange" placeholder="请选择">
            <!-- <el-option label="192.168.1.60" value="192.168.1.60"></el-option> -->
            <!-- <el-option label="192.168.16.94" value="192.168.16.94"></el-option> -->
            <el-option
              v-for="item in redisConfigSelect"
              :key="item.host"
              :value="item.host"
              :label="item.name"
            >{{item.name}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="DB">
          <el-select
            v-model="filters.db"
            v-loading="redisDbLoading"
            placeholder="请选择"
            style="width:100px"
          >
            <!-- <el-option label="" value=""></el-option> -->
            <el-option
              v-for="item in redisDb"
              :key="item.db"
              :value="item.db"
              :label="item.name"
            >{{item.name}}</el-option>
            <!-- <el-option label="db0" value="0"></el-option>
            <el-option label="db1" value="1"></el-option>
            <el-option label="db2" value="2"></el-option>
            <el-option label="db3" value="3"></el-option>
            <el-option label="db4" value="4"></el-option>
            <el-option label="db5" value="5"></el-option>
            <el-option label="db6" value="6"></el-option>
            <el-option label="db7" value="7"></el-option>
            <el-option label="db8" value="8"></el-option>
            <el-option label="db9" value="9"></el-option>
            <el-option label="db10" value="10"></el-option>
            <el-option label="db11" value="11"></el-option>
            <el-option label="db12" value="12"></el-option>
            <el-option label="db13" value="13"></el-option>
            <el-option label="db14" value="14"></el-option>
            <el-option label="db15" value="15"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="搜索">
          <el-input v-model="filters.keyword" placeholder="搜索Keys" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getRedisCaches(1)">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="cacheInfos"
      highlight-current-row
      v-loading="listLoading"
      element-loading-text="数据加载中. . ."
      @selection-change="selsChange"
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="dataType" label="类型" width="80"></el-table-column>
      <el-table-column prop="redisKey" label="缓存键" sortable></el-table-column>
      <el-table-column prop="expire" label="过期时间" width="180">
        <template slot-scope="scope">
          <span v-html="formatterExpire(scope.row.expire)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="elCount" label="元素总数" width="140"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        :page-sizes="[10,20,30,50]"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!--编辑界面 :close-on-click-modal="false" -->
    <el-dialog
      title="编辑"
      v-if="editFormVisible"
      v-loading="editFormLoading"
      element-loading-text="数据加载中. . ."
      :visible.sync="editFormVisible"
      @close="cancelEdit"
      :disabled="true"
      custom-class="customEditDialogWidth"
    >
      <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
        <el-form-item label="数据类型">
          <el-select
            v-model="editForm.dataType"
            placeholder="请选择数据类型"
            @change="handleEditFormDataTypeChange"
            :disabled="true"
          >
            <el-option label="string" value="string"></el-option>
            <el-option label="list" value="list"></el-option>
            <el-option label="set" value="set"></el-option>
            <el-option label="zset" value="zset"></el-option>
            <el-option label="hash" value="hash"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="键" prop="key">
          <el-input
            v-model="editForm.key"
            auto-complete="off"
            placeholder="请输入key"
            style="width:70%"
          ></el-input>
          <el-button type="primary" @click.native="editKeySubmit" :loading="editKeyLoading">更新名称</el-button>
        </el-form-item>
        <el-form-item label="过期时间(旧)" prop="expireStr">
          <span v-html="formatterExpire(editForm.expireStr)"></span>
        </el-form-item>
        <el-form-item label="过期时间(新)" prop="expire">
          <el-input
            type="number"
            v-model="editForm.expire"
            auto-complete="off"
            placeholder="请输入过期时间"
            style="width:44%"
          ></el-input>

          <el-select v-model="editForm.unit" placeholder="请选择" style="width:25%">
            <!-- <el-option label="" value=""></el-option> -->
            <el-option label="秒" value="seconds"></el-option>
            <el-option label="分" value="minute"></el-option>
            <el-option label="时" value="hours"></el-option>
            <el-option label="天" value="days"></el-option>
          </el-select>
          <el-button
            type="primary"
            @click.native="editExpireSubmit"
            :loading="editExpireLoading"
          >更新过期时间</el-button>
          <!-- style="width:200px" -->
          <br />
          <label>只能输入正整数/负数，任意负数代表永不过期，输0则无效</label>
        </el-form-item>
        <el-form-item label="Hash键" prop="hkey" v-if="hkeyFlag2">
          <el-input
            v-model="editForm.hkey"
            auto-complete="off"
            placeholder="请输入Hash键"
            style="width:70%"
          ></el-input>
        </el-form-item>
        <el-form-item label="分值" prop="score" v-if="scoreFlag2">
          <el-input type="number" v-model="editForm.score" style="width:70%"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input type="textarea" v-model="editForm.value" rows="6" style="width:70%"></el-input>
          <el-button
            type="primary"
            @click.native="addValueSubmit"
            :loading="addValueLoading"
            v-if="addValueFlag"
          >添加值</el-button>
          <el-button
            type="primary"
            @click.native="editValueSubmit"
            :loading="editValueLoading"
            v-if="editValueFlag"
          >更新值</el-button>
        </el-form-item>

        <el-form-item label="值列表" v-if="allValueTableFlag">
          <el-form-item>
            <el-input
              v-model="cacheKeyword"
              @input="handleCacheKeywordInput"
              placeholder="搜索值列表"
              style="width:300px;"
            ></el-input>
            <!-- <el-button type="primary" v-on:click="getRedisCaches">查询</el-button> -->
          </el-form-item>
          <!--set列表-->
          <el-table
            id="editFormSet"
            :data="setValues"
            highlight-current-row
            v-loading="setValuesListLoading"
            element-loading-text="数据加载中. . ."
            @selection-change="selsChange"
            style="width: 100%;"
            v-if="setTableFlag"
          >
            <el-table-column prop="no" label="序号" width="60"></el-table-column>
            <el-table-column prop="svalue" label="值" :show-overflow-tooltip="1==1"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleEditDetails(scope.$index, scope.row)"
                >查看</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleEditDetailsDel(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--zset列表-->
          <el-table
            id="editFormZset"
            :data="zsetValues"
            highlight-current-row
            v-loading="zsetValuesListLoading"
            element-loading-text="数据加载中. . ."
            @selection-change="selsChange"
            style="width: 100%;"
            v-if="zsetTableFlag"
          >
            <el-table-column prop="no" label="序号" width="60"></el-table-column>
            <el-table-column prop="zvalue" label="值" :show-overflow-tooltip="1==1"></el-table-column>
            <el-table-column prop="zscore" label="分值" :show-overflow-tooltip="1==1"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleEditDetails(scope.$index, scope.row)"
                >查看</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleEditDetailsDel(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--Hash列表-->
          <el-table
            id="editFormHash"
            :data="hashValues"
            highlight-current-row
            v-loading="hashValuesListLoading"
            element-loading-text="数据加载中. . ."
            @selection-change="selsChange"
            style="width: 100%;"
            v-if="hashTableFlag"
          >
            <el-table-column prop="no" label="序号" width="60"></el-table-column>
            <el-table-column prop="hkey" label="Hash键" :show-overflow-tooltip="1==1"></el-table-column>
            <el-table-column prop="hvalue" label="Hash值" :show-overflow-tooltip="1==1"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleEditDetails(scope.$index, scope.row)"
                >查看</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleEditDetailsDel(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--工具条-->
          <el-col :span="24" class="toolbar">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleRedisCacheDetailsSizeChange"
              @current-change="handleRedisCacheDetailsCurrentChange"
              :page-size="10"
              :page-sizes="[10,20,30,50]"
              :total="elTotal"
              style="float:right;"
            ></el-pagination>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- this.$refs["editForm"].resetFields(); editFormVisible = false -->
        <el-button @click.native="cancelEdit">取消</el-button>
        <!-- <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> -->
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog
      title="新增"
      v-if="addFormVisible"
      :visible.sync="addFormVisible"
      :close-on-click-modal="false"
      custom-class="customWidth"
    >
      <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
        <el-form-item label="数据类型">
          <el-select
            v-model="addForm.dataType"
            placeholder="请选择数据类型"
            @change="handleDataTypeChange"
          >
            <el-option label="string" value="string"></el-option>
            <el-option label="list" value="list"></el-option>
            <el-option label="set" value="set"></el-option>
            <el-option label="zset" value="zset"></el-option>
            <el-option label="hash" value="hash"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="键" prop="key">
          <el-input v-model="addForm.key" auto-complete="off" placeholder="请输入key"></el-input>
        </el-form-item>
        <el-form-item label="过期时间" prop="expire">
          <el-input
            type="number"
            v-model="addForm.expire"
            auto-complete="off"
            placeholder="请输入过期时间"
            style="width:50%"
          ></el-input>

          <el-select v-model="addForm.unit" placeholder="请选择" style="width:49%">
            <!-- <el-option label="" value=""></el-option> -->
            <el-option label="秒" value="seconds"></el-option>
            <el-option label="分" value="minute"></el-option>
            <el-option label="时" value="hours"></el-option>
            <el-option label="天" value="days"></el-option>
          </el-select>
          <br />
          <!-- style="width:200px" -->
          <label>只能输入正整数/负数，任意负数代表永不过期，输0则无效</label>
        </el-form-item>
        <el-form-item label="Hash键" prop="hkey" v-if="hkeyFlag">
          <el-input v-model="addForm.hkey" auto-complete="off" placeholder="请输入Hash键"></el-input>
        </el-form-item>
        <el-form-item label="分值" prop="score" v-if="scoreFlag">
          <el-input type="number" v-model="addForm.score" auto-complete="off" placeholder="请输入分值"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input type="textarea" v-model="addForm.value" placeholder="请输入值" rows="6"></el-input>
        </el-form-item>
        <!-- <el-form-item label="左侧\右侧" v-if="listLocationFlag">
          <el-select v-model="addForm.listLocation" placeholder="请选择">
            <el-option label="左侧(头部)" value="0"></el-option>
            <el-option label="右侧(尾部)" value="1"></el-option>
        </el-select>-->
        <!-- </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">保存</el-button>
      </div>
    </el-dialog>

    <!-- 编辑 详情页面弹框 -->
    <el-dialog
      title="详情"
      v-if="editDetailsFormVisible"
      :visible.sync="editDetailsFormVisible"
      :close-on-click-modal="false"
      custom-class="customWidth"
    >
      <el-form
        v-model="editDetailsForm"
        :rules="editDetailsFormRules"
        label-width="100px"
        ref="editDetailsForm"
      >
        <!-- Hash :disabled="true" -->
        <el-form-item label="Hash键" prop="hkey" v-if="editDetailsHashFlag">
          <el-input v-model="editDetailsForm.hkey" auto-complete="off" placeholder="请输入Hash值"></el-input>
        </el-form-item>
        <el-form-item label="Hash值" prop="hvalue" v-if="editDetailsHashFlag">
          <el-input
            type="textarea"
            v-model="editDetailsForm.hvalue"
            placeholder="请输入Hash值"
            rows="6"
          ></el-input>
        </el-form-item>

        <!-- zset -->
        <el-form-item label="分值" prop="score" v-if="editDetailsZsetFlag">
          <el-input
            type="number"
            v-model="editDetailsForm.score"
            auto-complete="off"
            placeholder="请输入分值"
          ></el-input>
        </el-form-item>

        <!-- set -->
        <el-form-item label="值" prop="value" v-if="editDetailsSetFlag">
          <el-input type="textarea" v-model="editDetailsForm.value" placeholder="请输入值" rows="6"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editDetailsFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editDetailsSubmit" :loading="editDetailsLoading">保存</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import util from "../../common/js/util";

import NProgress from "nprogress";

import {
  batchRemoveUser,
  editUser,
  addUser,
  getRedisCacheList,
  getRedisConfigSelect,
  getCacheDetails,
  addRedisCache,
  removeCacheRedis,
  renameCacheRedis,
  updateCacheRedisExpire,
  updateCacheRedisValue,
  addCacheRedisValue,
  selectRedisDb
} from "../../api/api";

export default {
  data() {
    return {
      filters: {
        // 47.92.217.237
        host: "",
        db: "",
        keyword: ""
      },
      cacheKeyword: "",
      cacheHost: "",
      cacheDb: "0",
      allValueTableFlag: false,
      editDetailsHashFlag: false,
      editDetailsZsetFlag: false,
      editDetailsSetFlag: false,
      scoreFlag: false,
      scoreFlag2: false,
      // listLocationFlag: false,
      hkeyFlag: false,
      hkeyFlag2: false,
      hashTableFlag: false,
      zsetTableFlag: false,
      setTableFlag: false,
      addValueFlag: false,
      editValueFlag: false,
      hashValues: [],
      zsetValues: [],
      setValues: [],
      cacheInfos: [],
      redisDb: [],
      redisConfigSelect: [],
      total: 0,
      elTotal: 0,
      page: 1,
      elPage: 1,
      pageSize: 10,
      elPageSize: 10,
      currentPage: 1,
      elCurrentPage: 1,
      listLoading: false,
      editKeyLoading: false,
      editFormLoading: false,
      hashValuesListLoading: false,
      zsetValuesListLoading: false,
      setValuesListLoading: false,
      editExpireLoading: false,
      addValueLoading: false,
      editValueLoading: false,
      editDetailsLoading: false,
      redisDbLoading: false,
      sels: [], //列表选中列
      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      editFormRules: {
        key: [{ required: true, message: "请输入键", trigger: "blur" }],
        hkey: [{ required: true, message: "请输入Hash键", trigger: "blur" }],
        score: [{ required: true, message: "请输入分值", trigger: "blur" }],
        value: [{ required: true, message: "请输入值", trigger: "blur" }]
      },
      editDetailsFormRules: {
        // hkey: [{ required: true, message: "请输入Hash键", trigger: "blur" }],
        // hvalue: [{ required: true, message: "请输入Hash值", trigger: "blur" }] //,
        // score: [
        //   {
        //     required: true,
        //     message: "请输入分值",
        //     trigger: "blur"
        //   }
        // ],
        // value: [{ required: true, message: "请输入值", trigger: "blur" }]
      },
      //编辑界面数据
      editForm: {},
      editDetailsForm: {
        hkey: "",
        hvalue: "",
        score: "",
        value: ""
      },
      addFormVisible: false, //新增界面是否显示
      editDetailsFormVisible: false,
      addLoading: false,
      addFormRules: {
        dataType: [
          { required: true, message: "请选择数据类型", trigger: "blur" }
        ],
        key: [{ required: true, message: "请输入key", trigger: "blur" }],
        hkey: [{ required: true, message: "请输入hkey", trigger: "blur" }],
        value: [{ required: true, message: "请输入value", trigger: "blur" }],
        score: [{ required: true, message: "请输入分值", trigger: "blur" }]
      },
      //新增界面数据
      addForm: {
        dataType: "string",
        key: "",
        hkey: "",
        value: "",
        // expire: -1,
        unit: "seconds",
        score: "",
        listLocation: "1"
      }
    };
  },
  created() {
    // getRedisConfigSelect().then(res => {
    //   if (res.code === 200) {
    //     this.redisConfigSelect = res.data;
    //   }
    // });
  },
  methods: {
    // 过期时间显示加高亮
    formatterExpire: function(val) {
      return val === "永不过期"
        ? "<font color='#757575'>" + val + "</font>"
        : "<font color='red'>" + val + "</font>";
    },
    handleHostChange: function(val) {
      // alert(val);
      // console.log(val);
      this.redisDbLoading = true;

      selectRedisDb(val).then(res => {
        console.log(res);
        this.redisDbLoading = false;

        if (res.code === 200) {
          this.redisDb = res.data;
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      });
      return;
    },
    // 查询缓存列表
    getRedisCaches: function(val) {
      // console.log(this.filters);
      if (!this.filters.host) {
        this.$message({ message: "警告：主机不能为空哦！", type: "warning" });
        return;
      }
      if (!this.filters.db) {
        this.$message({ message: "警告：DB不能为空哦！", type: "warning" });
        return;
      }

      if (val == 1) {
        this.page = val;
      }

      let param = {
        pageNo: this.page,
        pageSize: this.pageSize,
        host: this.filters.host,
        db: this.filters.db === "" ? "0" : this.filters.db,
        keyword: this.filters.keyword
      };
      console.log(param);

      // NProgress.start();
      this.listLoading = true;
      getRedisCacheList(param).then(res => {
        // NProgress.done();
        // console.log(res);
        this.listLoading = false;
        if (res.code === 200) {
          this.cacheInfos = res.data;
          this.total = res.count;
        } else {
          this.cacheInfos = [];
          this.total = 0;
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      });
    },
    showDataType: function(val) {
      if (val === "zset") {
        this.scoreFlag = true;
        this.scoreFlag2 = true;
        this.addValueFlag = true;
        this.hkeyFlag = false;
      } else if (val === "hash") {
        this.addValueFlag = true;
        this.hkeyFlag2 = true;
        this.hkeyFlag = true;
        this.scoreFlag = false;
        this.scoreFlag2 = false;
      } else if (val === "list") {
        this.addValueFlag = true;
        this.editValueFlag = false;
      } else {
        this.scoreFlag = false;
        this.hkeyFlag = false;
      }
    },
    handleCacheKeywordInput(val) {
      this.cacheKeyword = val;
      this.elPage = 1;
      this.elPageSize = 10;
      let param = {
        keyword: this.editForm.key,
        cacheKeyword: val,
        type: this.editForm.dataType,
        host: this.filters.host,
        db: this.filters.db,
        pageNo: this.elPage,
        pageSize: this.elPageSize
      };
      this.pageRedisCacheDetails(param);
      // alert(val)
    },
    handleEditFormDataTypeChange(val) {},
    handleDataTypeChange(val) {
      // alert(val)

      this.showDataType(val);
    },
    // 详情页 每页条数
    handleRedisCacheDetailsSizeChange(val) {
      this.elPageSize = val;
      let param = {
        keyword: this.editForm.key,
        cacheKeyword: this.cacheKeyword,
        type: this.editForm.dataType,
        host: this.filters.host,
        db: this.filters.db,
        pageNo: this.elPage,
        pageSize: this.elPageSize
      };
      // 分页查询
      this.pageRedisCacheDetails(param);
    },
    handleSizeChange(val) {
      // alert('点击了设置每页条数')

      this.pageSize = val;
      this.getRedisCaches();
    },
    // 详情页 设置页码
    handleRedisCacheDetailsCurrentChange(val) {
      this.elPage = val;
      // alert(val)
      let param = {
        keyword: this.editForm.key,
        cacheKeyword: this.cacheKeyword,
        type: this.editForm.dataType,
        host: this.filters.host,
        db: this.filters.db,
        pageNo: this.elPage,
        pageSize: this.elPageSize
      };
      // console.log(param)
      // return;

      // 分页查询
      this.pageRedisCacheDetails(param);
    },
    handleCurrentChange(val) {
      // alert('翻页操作');
      this.page = val;
      // console.log(this.page);

      this.getRedisCaches();
    },
    handleEditDetailsDel: function(index, row) {
      let dataType = this.editForm.dataType;
      let param = {
        dataType: dataType,
        redisKey: this.editForm.key,
        host: this.filters.host,
        db: this.filters.db
      };

      if (dataType === "hash") {
        param["redisHKey"] = row.hkey;
      } else if (dataType === "list") {
        param["redisValue"] = row.svalue;
      } else if (dataType === "zset") {
        param["redisValue"] = row.zvalue;
      } else if (dataType === "set") {
        param["redisValue"] = row.svalue;
      } else {
      }

      // console.log(param);

      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          removeCacheRedis(param).then(res => {
            this.listLoading = false;

            this.$message({
              message: res.msg,
              type: res.code === 200 ? "success" : "error"
            });

            let reqData = {
              keyword: this.editForm.key,
              cacheKeyword: this.cacheKeyword,
              type: dataType,
              host: this.filters.host,
              db: this.filters.db,
              pageNo: this.elPage,
              pageSize: this.elPageSize
            };
            this.pageRedisCacheDetails(reqData);
          });
        })
        .catch(() => {});
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该缓存的所有记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          let param = {
            dataType: row.dataType,
            redisKey: row.redisKey,
            host: this.filters.host,
            db: this.filters.db
          };

          removeCacheRedis(param).then(res => {
            this.listLoading = false;

            this.$message({
              message: res.msg,
              type: res.code === 200 ? "success" : "error"
            });

            this.getRedisCaches();
          });
        })
        .catch(() => {});
    },
    // 缓存详情
    customCacheRedisDetails: function(param) {
      this.editFormLoading = true;
      // 获取详情
      getCacheDetails(param).then(res => {
        this.editFormLoading = false;
        if (res.code === 200) {
          // console.log(res);
          let d = res.data;
          this.editForm = {
            dataType: d.dataType,
            key: d.redisKey,
            value: d.redisValue,
            expireStr: d.expireStr,
            oldRedisKey: d.oldRedisKey,
            // 默认值
            unit: "seconds"
          };

          this.elTotal = d.elCount ? d.elCount : 0;

          this.allValueTableFlag = true;

          if (d.dataType === "hash") {
            this.hashValues = d.values;
            this.editValueFlag = false;
            this.zsetTableFlag = false;
            this.setTableFlag = false;
            this.hashTableFlag = true;
          } else if (d.dataType === "zset") {
            this.zsetValues = d.values;
            this.zsetTableFlag = true;
            this.hashTableFlag = false;
            this.setTableFlag = false;
            this.hkeyFlag2 = false;
          } else if (d.dataType === "set" || d.dataType === "list") {
            this.setValues = d.values;
            this.setTableFlag = true;
            this.addValueFlag = true;
            this.hashTableFlag = false;
            this.zsetTableFlag = false;
            this.editValueFlag = false;
            this.hkeyFlag2 = false;
            this.scoreFlag2 = false;
          } else {
            this.editValueFlag = true;
            this.addValueFlag = false;
            this.hkeyFlag2 = false;
            this.allValueTableFlag = false;
            this.scoreFlag2 = false;
          }

          this.showDataType(d.dataType);

          // this.pageRedisCacheDetails(param);
        }
      });
    },
    // 展开编辑页面的详情页
    handleEditDetails: function(index, row) {
      this.editDetailsFormVisible = true;
      // console.log("row")
      // console.log(row)
      // console.log("editForm")
      // console.log(this.editForm)

      let dataType = this.editForm.dataType;
      this.editDetailsHashFlag = false;
      this.editDetailsZsetFlag = false;
      this.editDetailsSetFlag = false;
      if (dataType === "hash") {
        this.editDetailsHashFlag = true;
        this.editDetailsForm = {
          hkey: row.hkey,
          hvalue: row.hvalue
        };
        this.editDetailsForm = {
          hkey: row.hkey,
          oldRedisKey: row.hkey,
          hvalue: row.hvalue,
          score: "",
          value: ""
        };
      } else if (dataType === "zset") {
        this.editDetailsZsetFlag = true;
        this.editDetailsSetFlag = true;

        this.editDetailsForm = {
          hkey: "",
          hvalue: "",
          score: row.zscore,
          value: row.zvalue,
          oldRedisKey: row.zvalue
        };
      } else if (dataType === "set" || dataType === "list") {
        this.editDetailsSetFlag = true;
        this.editDetailsForm = {
          hkey: "",
          hvalue: "",
          score: "",
          value: row.svalue,
          oldRedisKey: row.svalue
        };
      } else {
      }
    },
    // 编辑页面保存
    editDetailsSubmit: function() {
      // console.log("this.editForm");
      // console.log(this.editForm);
      // console.log("this.editDetailsForm");
      // console.log(this.editDetailsForm);
      // return ;

      let dataType = this.editForm.dataType;
      // console.log(dataType)

      let param = {
        host: this.filters.host,
        db: this.filters.db,
        dataType: dataType,
        redisKey: this.editForm.key,
        oldRedisKey: this.editDetailsForm.oldRedisKey
      };

      if (dataType === "hash") {
        param["redisHKey"] = this.editDetailsForm.hkey;
        param["redisValue"] = this.editDetailsForm.hvalue;
      } else if (dataType === "zset") {
        param["score"] = this.editDetailsForm.score;
        param["redisValue"] = this.editDetailsForm.value;
      } else if (dataType === "set" || dataType === "list") {
        param["redisValue"] = this.editDetailsForm.value;
      } else {
      }

      // console.log(param);
      // return;

      updateCacheRedisValue(param).then(res => {
        // console.log(res);
        this.$message({
          message: res.msg,
          type: res.code === 200 ? "success" : "error"
        });

        if (res.code === 200) {
          this.editDetailsFormVisible = false;
          let reqData = {
            keyword: this.editForm.key,
            cacheKeyword: this.cacheKeyword,
            type: dataType,
            host: this.filters.host,
            db: this.filters.db,
            pageNo: this.elPage,
            pageSize: this.elPageSize
          };

          this.pageRedisCacheDetails(reqData);
        }
      });
    },
    cancelEdit: function() {
      this.editFormVisible = false;
      // console.log(this.editForm);
      // if(this.editForm.dataType === 'set'){
      // this.getRedisCaches();
      // }
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      if (!this.filters.host) {
        this.$message({ message: "警告：主机不能为空哦！", type: "warning" });
        return;
      }
      if (!this.filters.db) {
        this.$message({ message: "警告：DB不能为空哦！", type: "warning" });
        return;
      }
      this.editFormVisible = true;
      this.hashValues = [];
      this.zsetValues = [];
      this.setValues = [];
      // console.log(row);
      this.elPage = 1;
      this.elPageSize = 10;
      this.elCurrentPage = 1;
      this.cacheKeyword = "";
      let param = {
        keyword: row.redisKey,
        type: row.dataType,
        pageNo: this.elPage,
        pageSize: this.elPageSize,
        host: this.filters.host,
        db: this.filters.db === "" ? "0" : this.filters.db
      };

      this.customCacheRedisDetails(param);
    },
    //显示新增界面
    handleAdd: function() {
      if (!this.filters.host) {
        this.$message({ message: "警告：主机不能为空哦！", type: "warning" });
        return;
      }
      if (!this.filters.db) {
        this.$message({ message: "警告：DB不能为空哦！", type: "warning" });
        return;
      }
      // alert();
      this.addFormVisible = true;
      this.addForm = {
        dataType: "string",
        key: "",
        hkey: "",
        value: "",
        // expire: -1,
        unit: "seconds",
        score: ""
        // listLocation: "1"
      };
      this.showDataType("string");
    },
    // 更新名称
    editKeySubmit: function() {
      // alert("更新名称");
      this.editKeyLoading = true;
      let param = {
        dataType: this.editForm.dataType,
        oldRedisKey: this.editForm.oldRedisKey,
        redisKey: this.editForm.key,
        host: this.filters.host,
        db: this.filters.db
      };
      // console.log(param);
      renameCacheRedis(param)
        .then(res => {
          this.editKeyLoading = false;
          this.$message({
            message: res.msg,
            type: res.code === 200 ? "success" : "error"
          });

          if (!res.code === 200) {
            this.editForm.key = this.editForm.oldRedisKey;
          }
        })
        .catch(() => {});
    },
    // 更新过期时间
    editExpireSubmit: function() {
      this.editExpireLoading = false;
      // alert("更新过期时间");
      let param = {
        dataType: this.editForm.dataType,
        redisKey: this.editForm.key,
        expire: this.editForm.expire,
        unit: this.editForm.unit,
        host: this.filters.host,
        db: this.filters.db
      };
      // console.log(param);
      // return;
      updateCacheRedisExpire(param).then(res => {
        this.editExpireLoading = false;
        this.$message({
          message: res.msg,
          type: res.code === 200 ? "success" : "error"
        });

        if (res.code === 200) {
          let reqData = {
            keyword: param.redisKey,
            type: param.dataType,
            host: param.host,
            db: param.db
          };

          getCacheDetails(reqData).then(res => {
            // console.log(res);
            if (res.code === 200) {
              this.editForm["expireStr"] = res.data.expireStr;
            }
          });
          // this.customCacheRedisDetails(reqData);
        }
      });
    },
    pageRedisCacheDetails: function(param) {
      // console.log(param);
      let dataType = param.type;

      this.editForm["value"] = "";
      if (dataType === "hash") {
        this.editForm["hkey"] = "";
        this.hashValuesListLoading = true;
      } else if (dataType === "zset") {
        this.editForm["score"] = "";
        this.zsetValuesListLoading = true;
      } else if (dataType === "set" || dataType === "list") {
        this.setValuesListLoading = true;
      }
      // 获取详情
      getCacheDetails(param).then(res => {
        if (res.code === 200) {
          let d = res.data;
          this.elTotal = d.elCount;
          if (dataType === "hash") {
            this.hashValuesListLoading = false;
            this.hashValues = d.values;
          } else if (dataType === "zset") {
            this.zsetValuesListLoading = false;
            this.zsetValues = d.values;
          } else if (dataType === "set" || dataType === "list") {
            this.setValuesListLoading = false;
            this.setValues = d.values;
          }
        }
      });
    },
    // 添加值
    addValueSubmit: function() {
      // alert("添加值");
      this.$refs.editForm.validate(valid => {
        // console.log(valid);
        if (valid) {
          let dataType = this.editForm.dataType;
          let reqData = {
            dataType: dataType,
            redisKey: this.editForm.oldRedisKey,
            redisHKey: this.editForm.hkey,
            redisValue: this.editForm.value,
            score: this.editForm.score,
            host: this.filters.host,
            db: this.filters.db
          };
          // console.log(reqData);

          this.addValueLoading = true;
          addCacheRedisValue(reqData).then(res => {
            this.$message({
              message: res.msg,
              type: res.code === 200 ? "success" : "error"
            });

            // 添加成功刷新 值列表
            if (res.code === 200) {
              this.addValueLoading = false;
              let param = {
                keyword: reqData.redisKey,
                type: dataType,
                host: reqData.host,
                db: reqData.db,
                pageNo: this.elPage,
                pageSize: this.elPageSize
              };
              // 分页查询
              this.pageRedisCacheDetails(param);
            }
          });
        }
      });
    },
    // 更新值
    editValueSubmit: function() {
      // alert("更新值");
      let reqData = {
        dataType: this.editForm.dataType,
        redisKey: this.editForm.key,
        redisHKey: this.editForm.hkey,
        redisValue: this.editForm.value,
        host: this.filters.host,
        db: this.filters.db
      };
      // console.log(reqData);
      this.editValueLoading = true;
      updateCacheRedisValue(reqData).then(res => {
        // console.log(res);
        this.editValueLoading = false;
        this.$message({
          message: res.msg,
          type: res.code === 200 ? "success" : "error"
        });
      });
    },
    //编辑
    editSubmit: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {
            type: "warning"
          }).then(() => {
            this.editLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.editForm);
            para.birth =
              !para.birth || para.birth == ""
                ? ""
                : util.formatDate.format(new Date(para.birth), "yyyy-MM-dd");
            editUser(para).then(res => {
              this.editLoading = false;
              //NProgress.done();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs["editForm"].resetFields();
              this.editFormVisible = false;
              this.getUsers();
            });
          });
        }
      });
    },
    //新增
    addSubmit: function() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", { type: "warning" }).then(
            () => {
              this.addLoading = true;

              let d = Object.assign({}, this.addForm);

              let param = {
                dataType: d.dataType,
                redisKey: d.key,
                redisHKey: d.hkey,
                redisValue: d.value,
                expire: d.expire,
                score: d.score,
                unit: d.unit,
                host: this.filters.host,
                db: this.filters.db
              };

              // console.log(param);
              // return;

              addRedisCache(param).then(res => {
                this.addLoading = false;

                this.$message({
                  message: res.msg,
                  type: res.code === 200 ? "success" : "error"
                });
                if (res.code === 200) {
                  this.$refs["addForm"].resetFields();
                  this.addFormVisible = false;
                  this.getRedisCaches();
                }
              });
            }
          );
        }
      });
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function() {
      var ids = this.sels.map(item => item.id).toString();
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { ids: ids };
          batchRemoveUser(para).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: res.msg,
              type: res.code === 200 ? "success" : "error"
            });
            this.getUsers();
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    getRedisConfigSelect().then(res => {
      if (res.code === 200) {
        this.redisConfigSelect = res.data;
      }
    });
  }
};
</script>

<style>
.customWidth {
  /* width: 80%; */
}
.customEditDialogWidth {
  width: 68%;
}
.el-tooltip__popper {
  max-width: 30%;
}
</style>


// WEBPACK FOOTER //
// RedisCache.vue?d0b29bf8